myapp.views.Index = Ext.extend(Ext.Panel, {
    dockedItems: [{
        xtype: 'toolbar',
        title: 'MuseumsBC',
        items: [
            { xtype: 'spacer' },
            {
                text: 'Credits',
                ui: 'action',
                listeners: {
                    'tap': function () {
                        Ext.dispatch({
                            controller: myapp.controllers.museums,
                            action: 'credits',
                            animation: { type: 'slide', direction: 'up' }
                        });
                    }
                }
            }
        ]
    }],
    items:  [
             {
        	    html: "<h1>welcome</h1>",
        	    styleHtmlContent: true,

             },
             {
		        scroll: 'vertical',// jl testing
		        /* check out
		         * http://stackoverflow.com/questions/6141925/sencha-touch-list-is-not-scrolling-right
		         */
		        height: '100%',// jl testing
		        xtype: 'list',
		        store: myapp.stores.indexMenuItems,
		        itemTpl: '{html}',
		        onItemDisclosure: function (record) {
		        	//alert('controller: ' + record.data.controller + ' action: ' + record.data.action + ' id: ' + record.getId());
		            Ext.dispatch({
		                controller: record.data.controller,
		                action: record.data.action,
		                id: record.getId()
		            });
		        },
		        listeners: {
		        	'itemtap': function(list, index, item, e) {
		            	var record = list.store.data.get(item.viewIndex);
			            Ext.dispatch({
			            	// cannot just put controller: record.data.controller below
			            	// as it's a string, and not an object reference.
			            	// reference it with square brackets
			                controller: myapp.controllers[record.data.controller],
			                //action: 'show',
			                action: record.data.action,
			                // TODO - 2011/10
			                // dynamic action wasn't working? now trying hardcoded 'show'
			                // hardcoded 'show' *does* work. how to get dynamic reference?
			                //action: record.data.action,// 'show',
			                id: list.store.data.get(item.viewIndex).getId()
			            });
		        	}
		        }
            }
            ],

    
});